<script setup>
import { ref, toRaw } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Type from '@components/search/type'
import Search from '@components/search/index'
import PageWrapper from '@components/PageWrapper.vue'
import { common, service } from '@utils'
import { Plus, Edit, View, Delete, TurnOff, Open } from '@element-plus/icons-vue'
import { usePremission, useRole } from '@hooks'
import EditCom from './Edit'

const premission = usePremission({
    view: 'bfqz:coupon:view',
    edit: 'bfqz:coupon:save',
    add: 'bfqz:coupon:add',
    del: 'bfqz:coupon:del',
})

const searchs = ref([
    {
        type: Type.INPUT,
        key: 'couponName',
        width: 5,
        placeholder: '名称'
    },
    {
        type: Type.SELECT,
        key: 'couponStatus',
        width: 3,
        data: [],
        valueKey: 'val',
        placeholder: '状态'
    },
    {
        type: Type.SELECT,
        key: 'type',
        width: 4,
        data: [],
        valueKey: 'val',
        placeholder: '优惠类型'
    },
    {
        type: Type.SELECT,
        key: 'typeOfOffer',
        width: 3,
        data: [],
        valueKey: 'val',
        placeholder: '优惠形式'
    },
    {
        type: Type.SELECT,
        key: 'ranges',
        width: 3,
        data: [],
        valueKey: 'val',
        placeholder: '优惠范围'
    },
    {
        width: 6,
        type: Type.SEARCH_BUTTON
    }
])

const pageRef = ref()
const tableRef = ref()
const editRef = ref()

let queryForm = {}

const onSearch = (param) => {
    queryForm = param
    pageRef.value.refresh()
}

const getData = async ({ pageNum, pageSize }, cb) => {
    const res = await service.bfqz.coupons(pageNum, pageSize, queryForm)
    cb(res)
    setTimeout(() => {
        tableRef.value.scrollTo(0, 0)
    }, 0)
}

const getDictionary = async () => {
    const res = await service.sys.dictionaryAll()
    if (res) {
        for (let i = 0; i < res.length; i++) {
            if (res[i].code === 'YesOrNo') {
                searchs.value[1].data = res[i].list
                console.log('sd=f=sdf', searchs.value[1].data)
            } else if (res[i].code === 'couponType') {
                searchs.value[2].data = res[i].list
            } else if (res[i].code === 'typeOfOffer') {
                searchs.value[3].data = res[i].list
            } else if (res[i].code === 'range') {
                searchs.value[4].data = res[i].list
            }
        }
    }
}

const changeState = async (row, couponStatus) => {
    const res = await service.bfqz.couponEdit({ ...row, couponStatus })
    if (res) {
        pageRef.value.refresh(true)
        ElMessage.success('修改成功')
    }
}

const deleteRow = async (row) => {
    ElMessageBox.confirm('是否删除此优惠券', '提示', {
        type: 'warning'
    }).then(async () => {
        const res = await service.bfqz.couponDelete(row.id)
        if (res) {
            ElMessage.success('删除成功')
            pageRef.value.refresh(true)
        }
    })
}

getDictionary()

const width = (function (premission) {
    let width = 24
    premission.view && (width += 33)
    premission.edit && (width += 33 * 2)
    premission.del && (width += 33)
    return Math.max(width, 72)
})(premission)
</script>
<template>
    <section class="main-white">
        <search :items="searchs" @filter="onSearch" />
        <div class="margin-bottom10" v-if="premission.add">
            <el-button type="primary" :icon="Plus" @click="editRef.open()">添加</el-button>
        </div>
        <page-wrapper @get-data="getData" ref="pageRef">
            <template v-slot:default="props">
                <vxe-table ref="tableRef" :loading="props.loading" :data="props.tableData.records"
                    :max-height="common.tableHeight(true, premission.add ? 2 : 1)" highlight-hover-row round stripe border>
                    <vxe-column type="seq" width="60"></vxe-column>
                    <vxe-column field="createDate" title="创建时间" width="160" />
                    <vxe-column field="couponName" title="名称" width="150" />
                    <vxe-column title="优惠类型" width="120">
                        <template #default="{ row }">
                            {{common.getValueByKey('val', row.type, searchs[2].data, 'label')}}
                        </template>
                    </vxe-column>
                    <vxe-column title="优惠形式" width="75">
                        <template #default="{ row }">
                            {{common.getValueByKey('val', row.typeOfOffer, searchs[3].data, 'label')}}
                        </template>
                    </vxe-column>
                    <vxe-column title="优惠范围" width="75">
                        <template #default="{ row }">
                            {{common.getValueByKey('val', row.ranges, searchs[4].data, 'label')}}
                        </template>
                    </vxe-column>
                    <vxe-column field="minPurchase" title="使用门槛" width="75" />
                    <vxe-column field="couponAmount" title="面额/折扣" width="80" />
                    <vxe-column field="couponNum" title="剩余数量" width="75" />
                    <vxe-column title="状态" width="80">
                        <template #default="{ row }">
                            <el-tag>
                                {{common.getValueByKey('val', row.couponStatus, searchs[1].data, 'label')}}
                            </el-tag>
                        </template>
                    </vxe-column>
                    <vxe-column field="couponStart" title="领取开始时间" width="100" />
                    <vxe-column field="couponEnd" title="领取结束时间" width="100" />
                    <vxe-column field="couponValid" title="使用有效期" width="100" />
                    <vxe-column title="操作" :width="width" fixed="right">
                        <template #default="{ row }">
                            <section class="flex-align flex-wrap">
                                <el-tooltip v-if="premission.view" effect="dark" content="详情" placement="top" :enterable="false">
                                    <el-button type="primary" plain :icon="View" size="small" circle @click="editRef.open(row, true)"></el-button>
                                </el-tooltip>
                                <el-tooltip v-if="premission.edit" effect="dark" content="修改" placement="top" :enterable="false">
                                    <el-button type="primary" :icon="Edit" size="small" circle @click="editRef.open(row)">
                                    </el-button>
                                </el-tooltip>
                                <el-tooltip v-if="premission.edit && row.couponStatus == 1" effect="dark" content="下架" placement="top"
                                    :enterable="false">
                                    <el-button type="danger" :icon="TurnOff" size="small" circle @click="changeState(row, 0)"></el-button>
                                </el-tooltip>
                                <el-tooltip v-if="premission.edit && row.couponStatus == 0" effect="dark" content="上架" placement="top"
                                    :enterable="false">
                                    <el-button type="success" :icon="Open" size="small" circle @click="changeState(row, 1)"></el-button>
                                </el-tooltip>
                                <el-tooltip v-if="premission.del" effect="dark" content="删除" placement="top" :enterable="false">
                                    <el-button type="danger" plain :icon="Delete" size="small" circle @click="deleteRow(row)">
                                    </el-button>
                                </el-tooltip>
                            </section>
                        </template>
                    </vxe-column>
                </vxe-table>
            </template>
        </page-wrapper>
        <edit-com ref="editRef" :types="searchs[2].data" :ranges="searchs[4].data" :methods="searchs[3].data"
            @refresh="flag => pageRef.refresh(flag)" />
    </section>
</template>